<template>
	<view class="contentBody">
		<view class="none" v-if="datas.length == 0">暂时还没有反馈内容哦！</view>
		<view v-for="(val,index) in datas" :key="index">
			<view class="oneContent">
				<view class="content-ask">
					<uni-tag text="问" type="success" />
					<text class="askInfo ask">{{val.proposal_text}}</text>
					<text class="askTime">{{val.crate_time}}</text>
					<view class="askImg">
						<!-- <image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image> -->
						<view class="img" v-for="(data,_index) in val.proposal_img" :key="_index" @tap="previewImage(val.proposal_img,_index)">
							<lazy-image class="lazy-image" :realSrc="data" :placeholdSrc="placeholderSrc"></lazy-image>
						</view>
					</view>
				</view>
				<view v-if="val.is_handle==1">
					<view class="space"></view>
					<view class="content-ask">
						<uni-tag text="答" type="warning" />
						<text class="askInfo unask">{{val.return_text}}</text>
						<text class="askTime">{{val.update_time}}</text>
					</view>
				</view>
			</view>
			<view v-if="index!=(len-1)" class="viewSpace"></view>
		</view>
		<view :class="{is_show:isshow}" class="loading">{{loadingText}}</view>
		<!-- 	<view class="twoContent">
			<view class="content-ask">
				<uni-tag text="问" type="success" />
				<text class="askInfo ask">手机播放课程时出现崩溃的问题，手机播放课程时出现崩溃的问题，手机播放课程时出现崩溃的问题。</text>
				<text class="askTime">2019-05-16 12:20</text>
				<view class="askImg">
					<view>
						<image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image>
						<image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image>
						<image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="viewSpace"></view>
		<view class="threeContent">
			<view class="content-ask">
				<uni-tag text="问" type="success" />
				<text class="askInfo ask">手机播放课程时出现崩溃的问题，手机播放课程时出现崩溃的问题，手机播放课程时出现崩溃的问题。</text>
				<text class="askTime">2019-05-16 12:20</text>
				<view class="askImg">
					<view>
						<image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image>
						<image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image>
						<image src="../../static/images/new-pages/personal-center.png" style="width: 172upx;height: 152upx;margin-right: 20upx;" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import lazyImage from "@/components/lazy-image.vue"
	import cDate from '@/common/util.js';
	export default {
		components: {
			uniTag,
			lazyImage
		},
		data() {
			return {
				isshow: true,
				loadingText: '加载中...',
				placeholderSrc: this.defimg,
				page: 1,
				timer: null,
				datas: [],
				len: ''
			}
		},
		onLoad: function() {
			this.getDataList();
			this.$forceUpdate();
		},
		onNavigationBarButtonTap: function() {
			uni.navigateTo({
				url: 'mustfeed'
			})
		},
		onPullDownRefresh: function() {
			this.getDataList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function() {
			var _this = this;
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
			this.isshow = false;
			this.loadingText = '加载中...';
			this.timer = setTimeout(function() {
				_this.page = _this.page + 1;
				_this.getData(_this.page, 8);
			}, 1000);
		},
		methods: {
			getDataList: function() {
				var token = uni.getStorageSync('token');
				this.$gapi.apiPost('user/Proposal/listsProposal', {
					k_token: token,
					type: 3
				}).then(res => {
					if (res.data.code == 200) {
						this.datas = res.data.data.data;
						for (let i = 0; i < this.datas.length; i++) {
							this.datas[i].crate_time = cDate.getFormatTime(this.datas[i].crate_time);
							this.datas[i].update_time = cDate.getFormatTime(this.datas[i].update_time);
						}
						this.len = this.datas.length;
					} else {
						uni.showToast({
							title: '没有意见反馈',
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			getData: function(page, pagesize) {
				var token = uni.getStorageSync('token');
				this.$gapi.apiPost('user/Proposal/listsProposal', {
					k_token: token,
					page: page,
					pagesize: pagesize,
					type: 3
				}).then(res => {
					if (res.data.code == 200) {
						this.datas = this.datas.concat(res.data.data.data);
						for (let i = 0; i < this.datas.length; i++) {
							this.datas[i].crate_time = cDate.getFormatTime(this.datas[i].crate_time);
							this.datas[i].update_time = cDate.getFormatTime(this.datas[i].update_time);
						}
						this.len = this.datas.length;
					} else if (res.data.code == 400) {
						var _this = this;
						this.loadingText = '已加载全部';
						this.timer = setTimeout(function() {
							_this.isshow = true;
						}, 1000);
					}
				});
			},
			/* 预览图片 */
			previewImage: function(list, index) {
				uni.previewImage({
					current: index,
					urls: list
				})
			}
		}
	}
</script>

<style>
	.uni-tag {
		padding: 0upx !important;
		height: 32upx !important;
		margin-top: 5upx;
	}

	.uni-tag--success {
		width: 32upx;
		height: 32upx;
		padding: 0;
		background-color: #00D5A2;
		position: absolute;
		top: 6upx;
	}

	.uni-tag--warning {
		width: 32upx;
		height: 32upx;
		padding: 0;
		background-color: #FF9900;
		position: absolute;
		top: 6upx;
	}

	.unask {
		color: #FF9900;
	}

	.ask {
		color: rgba(102, 102, 102, 1);
	}

	.viewSpace {
		width: 100%;
		height: 20upx;
		background-color: #F3F3F3;
	}

	.contentBody {
		width: 100%;
	}

	.none {
		color: #999999;
		text-align: center;
		margin-top: 200upx;
		font-size: 36upx;
	}

	.content-ask {
		position: relative;
		width: 690upx;
		margin: 30upx auto 20upx auto;
	}

	.content-ask>text {
		display: inline-block;
	}

	.content-ask uni-tag {
		background-color: #00D5A2;
	}

	.content-ask>.askInfo {
		width: 640upx;
		margin-left: 45upx;
		margin-top: -4upx;
		font-size: 34upx;
		color: #666666;

	}

	.content-ask>.askTime {
		margin-left: 45upx;
		margin-top: 4upx;
		color: #999999;
		font-size: 28upx;
	}

	.space {
		width: 686upx;
		border: 1upx solid #E5E5E5;
		margin: 0 auto 34upx auto;
	}


	.twoContent {
		margin-bottom: 20upx;
	}

	.askImg {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: 45upx;
		margin-top: 10upx;
	}

	.threeContent {}

	.loading {
		width: 100%;
		text-align: center;
		line-height: 80px;
	}

	.is_show {
		display: none;
	}

	.img {
		width: 172upx;
		height: 152upx;
		margin-right: 20upx;
	}
</style>
